<template>
  <div class="mainBox">
    <div class="loginBox">
      <h1 class="animate__animated animate__bounce">登 录</h1>
      <el-form
        :model="user"
        :rules="rules"
        label-width="80px"
        ref="form"
        class="formBox"
        @keyup.enter.native="submitLogin"
      >
        <el-form-item label="账号" prop="phone" size="20" class="formItemBox">
          <el-input
            type="text"
            class="inputBox"
            aria-autocomplete="false"
            v-model="user.phone"
            placeholder="请输入账号"
          ></el-input> </el-form-item
        ><br />
        <el-form-item label="密码" prop="pwd">
          <el-input
            type="password"
            class="inputBox"
            aria-autocomplete="false"
            v-model="user.pwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox class="myRedCheckBox" v-model="checked"
            >7天自动登录</el-checkbox
          >
        </el-form-item>
        <el-form-item class="submitBox">
          <el-button type="primary" @click="submitLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      checked: false,
      // imgSrc:require('../assets/img/back.jpeg'),
      user: {
        phone: "",
        pwd: "",
        name: "",
        sign: "",
      },
      rules: {
        phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitLogin() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios
            .post("http://120.77.71.211:9011/api/login", this.user)
            .then((resp) => {
              if (resp.data.code == 200) {
                console.log(resp);
                if (this.checked == true) {
                  this.$setCookie("HBlogToken", resp.data.data, 7);
                } else {
                  this.$setCookie2("HBlogToken", resp.data.data);
                }
                this.$message({
                  message: resp.data.message,
                  type: "success",
                });
                this.$router.replace("/homeTable");
              } else {
                this.$message.error(resp.data.message);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },

  created() {
  },
};
</script>

<style>
.loginBox {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 250px auto;
  width: 350px;
  height: 350px;
  padding: 15px 35px 15px 35px;
  background: rgba(182, 187, 230, 0.5);
  box-shadow: 0 0 10px rgb(92, 192, 223);
}
.submitBox {
  /* margin: 30px auto; */
  margin-left: 60px;
}
.mainBox {
  width: 100%;
  height: 100%;
  /* background-image: url("../assets/img/blue.jpeg"); */
  background: #355c7d; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #c06c84,
    #6c5b7b,
    #355c7d
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #c06c84,
    #6c5b7b,
    #355c7d
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  background-size: cover;
  position: fixed;
}
.animate__animated .animate__bounce {
  font-size: 20px;
}
/* .formBox{
  float: left;
} */
.inputBox {
  width: 200px;
}
.myRedCheckBox {
  float: right;
}
/* 设置带边框的checkbox，选中后边框的颜色 */
.myRedCheckBox.is-bordered.is-checked {
  border-color: #06f34d;
}

/* 设置选中后的文字颜色 */
.myRedCheckBox .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #c7fd01;
}

/* 设置选中后对勾框的边框和背景颜色 */
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #ddf507;
  background-color: #06f34d;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #06f34d;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.myRedCheckBox .el-checkbox__inner:hover {
  border-color: #d4ee63;
}
</style>